<script>
import rules from './formRules'
import Album from '@/components/Album/album.vue'
import AlbumWithUpload from '@/components/Album/albumWithUpload.vue'
export default {
  components: {
    Album,
    AlbumWithUpload
  },
  props: {
    value: {
      type: Object,
      required: true,
      default() {
        return {
          apartmentID: null,
          roomName: '',
          bad: 1,
          rent: 0,
          remark: '',
          employees: [],
          photos: []
        }
      }
    },
    fetchApartments: {
      type: Function
    },
    roomUser: {
      type: Function
    },

    /**
         * Array => [
         *      {
         *          label:'公寓1',
         *          value:1
         *      },
         *      ...
         * ]
         */
    apartmentOptions: {

      type: Array,
      required: true,
      default() {
        return []
      }
    },
    userOptions: {
      type: Array
      // required: true,
      // default() {
      //   return []
      // }
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    fieldsDisabled: {
      type: Array
    },

    // KRIS:TEMP
    urls: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // form: {
      //     apartmentID:null,
      //     roomName: '',
      //     bad: 1,
      //     rent: 0,
      //     photos: []
      // },
      formRules: rules,

      // Loading status
      isFetchingApartments: false
    }
  },
  computed: {
    fieldsDisabledFormatted() {
      return Array.isArray(this.fieldsDisabled) ? this.fieldsDisabled : []
    },
    form: {
      get() {
        return this.value
      },
      set(form) {
        this.$emit('input', form)
      }
    }
  },
  watch: {
    form: {
      handler(v) {
        console.log(v)
      },
      deep: true
    }
  },
  methods: {
    badInput(bad) {
      const num = parseInt(bad)
      this.form.bad = isNaN(num) ? 0 : num
    },
    rentInput(rent) {
      const num = parseFloat(rent)
      this.form.rent = isNaN(num) ? 0 : num
    },
    userInput(keyuserid) {
      console.log(keyuserid)
      if (this.roomUser instanceof Function) {
        this.isFetchingApartments = true
        this.roomUser(keyuserid).finally(() => this.isFetchingApartments = false)
      }
    },
    fetchApartmentsWithLoadingStatus(keyword) {
      if (this.fetchApartments instanceof Function) {
        this.isFetchingApartments = true
        this.fetchApartments(keyword).finally(() => this.isFetchingApartments = false)
      }
    },

    resetFields() {
      this.$refs.form?.resetFields()
      this.$refs['album-with-upload']?.clear?.()
    },
    validate() {
      return new Promise((resolve) => {
                this.$refs.form?.validate(flag => {
                  resolve(flag)
                })
      })
    },

    handleChange() {
      this.$emit('select-change', this.form.employees)
    }
  }
}
</script>

<template>
  <div class="room-form-container">
    <el-form
      ref="form"
      v-loading="loading"
      label-position="top"
      label-width="80px"
      :disabled="disabled"
      :model="form"
      :rules="formRules"
    >
      <el-form-item label="所属宿舍" prop="apartmentID">
        <el-select
          v-model="form.apartmentID"
          remote
          filterable
          placeholder="请选择所属宿舍"
          style="width: 100%;"
          :remote-method="fetchApartmentsWithLoadingStatus"
          :loading="isFetchingApartments"
          :disabled="fieldsDisabledFormatted.includes('apartment')"
        >
          <el-option
            v-for="apartment in apartmentOptions"
            :key="apartment.value"
            :label="apartment.label"
            :value="apartment.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="房间名称" prop="roomName">
        <el-input
          v-model="form.roomName"
          placeholder="请输入房间名称"
          :disabled="fieldsDisabledFormatted.includes('roomName')"
        />
      </el-form-item>

      <el-form-item label="床位" prop="bad">
        <el-input
          :value="form.bad"
          placeholder="请输入床位数量"
          :disabled="fieldsDisabledFormatted.includes('bad')"
          :maxlength="3"
          @input="badInput"
        />
      </el-form-item>

      <el-form-item label="租金" prop="rent">
        <el-input
          :value="form.rent"
          placeholder="请输入租金"
          :disabled="fieldsDisabledFormatted.includes('rent')"
          :maxlength="5"
          @input="rentInput"
        />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入备注"
          maxlength="200"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 4}"
          :disabled="fieldsDisabledFormatted.includes('remark')"
        />
      </el-form-item>

      <el-form-item
        v-for="item in form.employees"
        :key="item?.user?.id"
        label="入住人员"
        prop="employees"
      >
        <el-select
          v-model="item?.user.username"
          remote
          filterable
          placeholder="请选择入住人员"
          style="width: 100%;"
          :remote-method="userInput"
          :loading="isFetchingApartments"
          :disabled="fieldsDisabledFormatted.includes('employees')"
          @change="handleChange"
        >
          <el-option
            v-for="userItem in userOptions"
            :key="userItem.value"
            :label="userItem.label"
            :value="userItem.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="图片(最多8张)" prop="photos">
        <AlbumWithUpload ref="album-with-upload" :urls="urls" :pictures.sync="form.photos" :max-size="8" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss">
    .photos-container {
        border-radius: 6px;
        background-color: #f0f0f0;
        height: 100px;
    }
</style>
